<template>
<div class="content-center">
  <!-- 页面标签/页面tab -->

  <div class="content-cotainer border-box">
    <!-- 面包屑 -->
    <div class="content-breadcrumb">
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item  class="home-font">项目管理</el-breadcrumb-item>
        <el-breadcrumb-item>项目资料清理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 页面内容-->
    <div class="audit-content">
      <div class="centent-title">
        <span>项目资料清理</span>
      </div>
      <!-- 按钮查询条件 -->
      <el-form :model="projectForm" label-width="100px" size="small" style="width:97%; margin:0 auto">
        <el-row style="margin-top:10px;">
          <el-col :span="8">
            <el-form-item label="当前项目：">
              <el-select v-model="projectForm.auditPrjId" @change="selectChange" clearable placeholder="请选择当前项目" size="small" style="width:240px">
                <el-option v-for="item in prjOptions" :key="item.auditPrjId" :label="item.auditPrjNm" :value="item.auditPrjId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审计组：">
              <el-select v-model="projectForm.auditGrpId" @focus="onFocus" clearable placeholder="请选择审计组" size="small" style="width:240px">
                <el-option v-for="item in grpOptions" :key="item.auditGrpId" :label="item.auditGrpNm" :value="item.auditGrpId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-button type="primary" icon="el-icon-document-checked" size="small" @click="emport">一键导出</el-button>
          <!-- <el-button type="primary" icon="el-icon-document-add" size="small" @click="checkImport">导入预览</el-button> -->
          <el-button type="primary" icon="el-icon-delete-solid" size="small" @click="cleanData">清理数据</el-button>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="文书类型：">
              <el-input v-model="projectForm.docType" size="small" clearable placeholder="请输入文书类型"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="文档名称：">
              <el-input v-model="projectForm.docNm" size="small" clearable placeholder="请输入文档名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="上传人：">
              <el-select v-model="projectForm.userId" size="small" clearable placeholder="请选择上传人">
                <el-option label="王鑫" value="wx"></el-option>
                <el-option label="邹阳" value="zy"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button style="margin-left: 30px" type="primary" icon="el-icon-search" size="small" @click="searchList">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <div class="inner-table" style="width:95%; margin:0 auto">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          stripe
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- <el-table-column prop="company" label="单位名称" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>-->
          <!-- <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>-->
          <el-table-column label="序号" width="100"  type="index"></el-table-column>
          <el-table-column prop="nodeNm" label="阶段名称" width="220"></el-table-column>
          <el-table-column prop="docType" label="文书类型" width="240"></el-table-column>
          <el-table-column prop="docNm" label="文档名称" width="300" show-overflow-tooltip></el-table-column>
          <el-table-column prop="userId" label="上传人" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <div style="text-align: center;margin-top:10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
  </div>

</div>
</template>
<script>
  import axios from 'axios'
  import {selectList,cleanUpDate,queryTOesAuditPrj,queryTOesAuditGrp} from '@/api'
  export default {
  	data() {
      return {
        multipleSelection: [],
        projectForm: {
          auditPrjId:'',
          auditGrpId:'',
          docType:'',
          docNm:'',
          userId:'',
        },
        currentPage:1, //初始页
        pagesize:10,   //每页的数据
        tableData: [],
        prjOptions: [],
        grpOptions: []
      }
    },
    mounted() {
      let params = {userId:"0001"}
      queryTOesAuditPrj(params).then(response => {
        this.prjOptions = response;
      }).catch((error) => {
        console.log(error)
      })

      //this.searchList()
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange: function (size) {
        this.pagesize = size;//每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;//点击第几页
      },
      selectChange(val){
        let params = {userId:"0001",auditPrjId:val}
        this.projectForm.auditGrpId = ''
        queryTOesAuditGrp(params).then(response => {
          this.grpOptions = response
        }).catch((error) => {
          console.log(error)
        })
      },
      onFocus(){
        const auditPrjId = this.projectForm.auditPrjId
        if(auditPrjId == null || auditPrjId == ""){
          return this.$message.warning(`请先选择当前项目`)
        }
      },
      searchList(){
        let auditPrjId = this.projectForm.auditPrjId
        let auditGrpId = this.projectForm.auditGrpId
        if(auditPrjId && auditGrpId){
          let entity = {
            auditPrjId: auditPrjId,
            auditGrpId: auditGrpId,
            docType: this.projectForm.docType,
            docNm: this.projectForm.docNm,
            userId: this.projectForm.userId,
          }
          let params = {entity:entity,pageNum:this.currentPage,pageSize:this.pagesize}
          console.log(params)
          selectList(params).then(response => {
            this.tableData = response.list;
          }).catch((error) => {
            console.log(error)
          })
        }else{
          this.$message.warning(`当前项目和审计组不能为空`)
        }
      },
      emport(){
        let ids = [];
        this.multipleSelection.forEach(item =>{
          ids.push(item.docufileId);
        })
        console.log(ids)
      },
      checkImport(){

      },
      cleanData(){
        let params = {
          auditPrjId: this.projectForm.auditPrjId,
          auditGrpId: this.projectForm.auditGrpId,
          userId: "11111111"
        }
        if(params.auditPrjId && params.auditGrpId){
          this.$confirm('此操作将永久清理数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            cleanUpDate(params).then(response => {
              if (response.resultCode == "200") {
                this.$message({
                  type: 'success',
                  message: response.resultMsg
                });
              }else{
                this.$message.error(response.resultMsg);
              }
              this.searchList();
            }).catch((error) => {
              console.log(error)
            })
          })
        }else{
          this.$message.warning('当前项目不能为空！')
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .content-cotainer {
    padding: 0 20px 20px 20px;
    height: 100%;
  }
</style>